import PropTypes from "prop-types";
import React, { memo, useState } from "react";
import { TabsWrapper } from "./style";
import IconAll from '../../assets/img/icon-all.png'

const SectionTabs = memo((props) => {
  const [iconCount, setIconCount] = useState(0);
  const { list } = props;
  const changeItemClick = (index) => {
    setIconCount(index)
  };

  return (
    <React.Fragment>
      {
        list.map((item, index) => {
          return (
            <TabsWrapper
              className={iconCount == index ? "item active" : "item"}
              key={item.id}
              onClick={() => changeItemClick(index)}
            >
              {iconCount == index && (
                <i className="icon">
                  <img src={IconAll} alt="" />
                </i>
              )}
              <div>{item.title}</div>
            </TabsWrapper>
          );
        })}
    </React.Fragment>
  );
});

SectionTabs.propTypes = {
  list: PropTypes.array,
};

export default SectionTabs;
